<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>搜索框自动提示</title>
		<link rel="stylesheet" href="css/new_file.css" />
	</head>

	<body>
		<!--onkeyup在键盘按键被松开时发生-->
		<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">

		<ul id="myUL">
			<li>
				<a href="#" class="header">A</a>
			</li>
			<li>
				<a href="#">Adele</a>
			</li>
			<li>
				<a href="#">Agnes</a>
			</li>

			<li>
				<a href="#" class="header">B</a>
			</li>
			<li>
				<a href="#">Billy</a>
			</li>
			<li>
				<a href="#">Bob</a>
			</li>

			<li>
				<a href="#" class="header">C</a>
			</li>
			<li>
				<a href="#">Calvin</a>
			</li>
			<li>
				<a href="#">Christina</a>
			</li>
			<li>
				<a href="#">Cindy</a>
			</li>
		</ul>
		
		<script >
			function myFunction(){
		/*1获取元素对象li
		 * 2循环操作；
		 * 比较：li a 内容是否包含input内容
		 * 若包含：li显示
		 * 若不包含：里隐藏
		 */
		var inputs=document.getElementById('myInput');
		var ul=document.getElementById('myUL');
		var lis=ul.getElementsByTagName('li');
		var filter=inputs.value.toLowerCase();
		for (var i=0;i<lis.length;i++) {
			//li a 的内容
			var content=lis[i].getElementsByTagName('a')[0].innerHTML.toLowerCase();
		
		if(content.indexOf(filter)==-1){
		lis[i].style.display='none';	
		}else{
			lis[i].style.display='block';
		}
		}
	}
		</script>
	</body>

</html>